<template>
  <div class="view-image">
    <camera-player
      v-if="playVideo"
      :device-id="camera.deviceId"
      height="100%"
      :type="type"
      @onStop="playVideo = false"
    />
    <div v-else>
      <div
        v-for="(camera,index) in cameraList"
        :key="index"
        style="position: relative;width: 100%;height: 100px"
      >
        <el-image
          fit="fit"
          style="width:100%;height:100%;"
          :src="camera.picturePath"
        />
        <el-button-group style="position: absolute;bottom: 5px;left: 5px">
          <el-button
            type="primary"
            icon="el-icon-picture-outline"
            @click="snap(camera)"
          />
          <el-button
            icon="el-icon-video-camera"
            type="primary"
            @click.stop="hls(camera)"
          />
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script>
import BaseView from '../../BaseView'
import CameraPlayer from '@/components/CameraPlayer'
import { listCameraBind } from '@/api/camera/cameraBindApi'
import { getDevice } from '@/api/iot/iotDeviceApi'

export default {
  name: 'IotCameraList',
  components: {
    CameraPlayer
  },
  extends: BaseView,
  data() {
    return {
      playTypeList: [],
      cameraList: [],
      camera: {},
      playVideo: false,
      type: null
    }
  },
  mounted() {
    this.playTypeList = [{
      value: 'video',
      label: this.$t('video')
    }, {
      value: 'picture',
      label: this.$t('snap')
    }]
    this.listCameraBind()
  },
  methods: {
    listCameraBind() {
      getDevice({
        deviceId: this.detail.dataBind.deviceId
      }).then(res1 => {
        listCameraBind({
          deviceCore: res1.data.deviceCore
        }).then(res => {
          const { code, data } = res
          if (code === '200') {
            this.cameraList = data
          } else {
            this.cameraList = []
            this.camera = {}
          }
        })
      })
    },
    historyImg(item) {
      this.camera = item
      this.$router.push({
        path: '/camera/img/' + item.deviceId,
        query: { deviceId: item.deviceId, hid: item.hid }
      })
    },
    snap(item) {
      this.camera = item
      this.type = 'picture'
      this.playVideo = true
    },
    hls(item) {
      this.camera = item
      this.type = 'video'
      this.playVideo = true
    }
  }
}
</script>

<style scoped lang="scss">
.view-image {
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
